<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XXXX系统</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/comstyle/validation/validation.css">
 <style type="text/css">
        body
        {
            font-size:12px;
        }
        /* form中显示文字的label */
        .slabel
        {
            width:100px;
            display: -moz-inline-box;
            line-height: 1.8;
            display: inline-block;
            text-align:right;
        }
        .gray { color: gray; }
    </style>
</head>
<body>
    <form id="commentForm" method="get" action="">
    <fieldset style="width:500px;"><legend>表单验证</legend>
        <p>
            <label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>
            <input id="cname" name="name" size="25" />
        </p>
        <p>
        	<label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
            <input id="cemail" name="email" size="25"/>
        </p>
        <p>
        	<label for="pw" class="slabel"><em class="textred">*</em> 密码:</label>
            <input id="pw" name="pw" type="password"  size="25"/>
        </p>
        <p>
        	<label for="cpw" class="slabel"><em class="textred">*</em> 确认密码:</label>
            <input id="cpw" name="cpw" type="password"  size="25"/>
        </p>
        <p>
        	<em class="textred"></em> <label for="curl" class="slabel">网址:</label>            
            <input id="curl" name="url" size="25" value="" />
        </p>
        <p>
        	<label for="ccomment" class="slabel"><em class="textred">*</em> 内容:</label>
            <textarea rows="2" id="ccomment" name="comment" cols="20"  style="height:80px;"></textarea>
        </p>
        <p>
			<label class="slabel">性别:</label>
				<input  type="radio" id="gender_male" value="m" name="gender" />
				男
				<input  type="radio" id="gender_female" value="f" name="gender" title="请选择"/>
				女
			</p>
        <p>
			<label for="newsletter" class="slabel">我接受订阅</label>
			<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
		</p>
		<fieldset id="newsletter_topics">
			<legend>请选择要订阅的类型</legend>
			<label for="topic_music">
				<input type="checkbox" id="topic_music" value="topic_music" name="topic" />
				音乐
			</label>
			<label for="topic_food">
				<input type="checkbox" id="topic_food" value="topic_food" name="topic" />
				美食
			</label>
			<label for="topic_sports">
				<input type="checkbox" id="topic_sports" value="topic_sports" name="topic" />
				体育
			</label>
			<label for="topic" class="error">请选择两项您想订阅的</label>
		</fieldset>
			<p>
		<label for="fruit">请选择至少两种水果</label><br/>
		<select id="fruit" name="fruit" title="请选择至少两种水果"  multiple="multiple">
			<option value="b">Banana</option>
			<option value="a">Apple</option>
			<option value="p">Peach</option>
			<option value="t">Turtle</option>
		</select>
	</p>
	<p>
		<label for="cars">Please select at least two cars, but no more than three</label><br/>
		<select id="cars" name="cars" title="请选择至少两辆车，最多三辆"  multiple="multiple">
			<option value="m_sl">Mercedes SL</option>
			<option value="o_c">Opel Corsa</option>
			<option value="vw_p">VW Polo</option>
			<option value="t_s">Titanic Skoda</option>
		</select>
	</p>
		<p>
	     <label for="cvalcode">验证码</label>
	     <input id="cvalcode" name="valcode" size="25"  value="" />=7+9
	   </p>
        <p style="text-align:center;">
            <input class="submit" type="submit" value="提交" />
        </p>
    </fieldset>
    </form>
   
	<jsp:include page="/common/jquery.jsp"/>
	<jsp:include page="/common/easyui.jsp"/>
	<jsp:include page="/common/jquery-validate.jsp"/>
	 <script type="text/javascript">
       /*==========用户自定义方法==========*/
		//自定义一个验证方法
		//参数name是添加的方法的名字
		//参数method是一个函数,接收三个参数(value,element,param) value是元素的值,element是元素本身 param是参数,
		$.validator.addMethod(
			"formula", //验证方法名称
			function(value, element, param) {//验证规则
				return value == eval(param);
			}, 
			'请正确输入数学公式计算后的结果'//验证提示信息
		);


       /*=验证=*/
       $(function()
       {
       //showProcess(true, '温馨提示', '正在提交数据...');
      // showProcess(false);
           var fv = $("#commentForm").validate(
           {
               errorClass: "error",
               submitHandler: function(form)
               {
               //验证是否通过
              // alert(fv.form());
                   //如果想提交表单, 需要使用form.submit()
                    //$("#commentForm :")
                   alert("submitted!");
                   alert($("#commentForm").serializeArray());
                  // alert($("#commentForm").serialize());
               },
               	errorElement: "em",				//用来创建错误提示信息标签
				success: function(label) {			//验证成功后的执行的回调函数
					//label指向上面那个错误提示信息标签em
					label.html("&nbsp;").addClass("success");
							//清空错误提示消息
							//加上自定义的success类
				},
               rules: {
                   //为name为email的控件添加两个验证方法:required()和email()
                   name: { required: true, minlength: 2 },
                   email: { required: true, email: true },
                   url:"url",
                   comment:"required",
                   pw: {
						required: true,
						minlength: 6
					},
				   cpw: {
						required: true,
						minlength: 6,
						equalTo: "#pw"
					},
					valcode: {
						formula: "7+9"	
					},
					gender:{
					required: true
					},
					newsletter:{
					required: true
					},
					fruit:{
						required:true, minlength:2
					},
					cars:{
					required:true, rangelength:[2,3]
					}
               },
               errorPlacement: function(error, element) { //指定错误信息位置
                if (element.is(':radio') || element.is(':checkbox')) {  //如果是radio或checkbox
                    var eid = element.attr('name');  //获取元素的name属性
                    error.appendTo(element.parent());    //将错误信息添加当前元素的父结点后面
                } else {
                    error.insertAfter(element);
                }
           	 },
               messages: {
                   //为name为email的控件的required()和email()验证方法设置验证失败的消息内容
                   email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"},
                   pw: {
						required: "请输入密码",
						minlength: "密码长度最少6个字符"
					},
				   cpw: {
						required: "请再次输入密码",
						minlength: "密码长度最少6个字符",
						equalTo: "两次密码输入不一致"
				   }
               }

           });
           
			var newsletter = $("#newsletter");
			// newsletter topics are optional, hide at first
			var inital = newsletter.is(":checked");
			var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
			var topicInputs = topics.find("input").attr("disabled", !inital);
			// show when newsletter is checked
			newsletter.click(function() {
				topics[this.checked ? "removeClass" : "addClass"]("gray");
				topicInputs.attr("disabled", !this.checked);
			});
           
       });        
       
       
       // 手机号码验证 
		jQuery.validator.addMethod("mobile", function(value, element) { 
		var length = value.length; 
		var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 
		return this.optional(element) || (length == 11 && mobile.test(value)); 
		}, "手机号码格式错误"); 
		
		// 电话号码验证 
		jQuery.validator.addMethod("phone", function(value, element) { 
		var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; 
		return this.optional(element) || (tel.test(value)); 
		}, "电话号码格式错误"); 
		
		// 邮政编码验证 
		jQuery.validator.addMethod("zipCode", function(value, element) { 
		var tel = /^[0-9]{6}$/; 
		return this.optional(element) || (tel.test(value)); 
		}, "邮政编码格式错误"); 
		
		// QQ号码验证 
		jQuery.validator.addMethod("qq", function(value, element) { 
		var tel = /^[1-9]\d{4,9}$/; 
		return this.optional(element) || (tel.test(value)); 
		}, "qq号码格式错误"); 
		
		// IP地址验证 
		jQuery.validator.addMethod("ip", function(value, element) { 
		var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; 
		return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); 
		}, "Ip地址格式错误"); 
		
		// 字母和数字的验证 
		jQuery.validator.addMethod("chrnum", function(value, element) { 
		var chrnum = /^([a-zA-Z0-9]+)$/; 
		return this.optional(element) || (chrnum.test(value)); 
		}, "只能输入数字和字母(字符A-Z, a-z, 0-9)"); 
		
		// 中文的验证 
		jQuery.validator.addMethod("chinese", function(value, element) { 
		var chinese = /^[\u4e00-\u9fa5]+$/; 
		return this.optional(element) || (chinese.test(value)); 
		}, "只能输入中文"); 
		
		// 下拉框验证 
		$.validator.addMethod("selectNone", function(value, element) { 
		return value == "请选择"; 
		}, "必须选择一项"); 
		
		// 字节长度验证 
		jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
		var length = value.length; 
		for (var i = 0; i < value.length; i++) { 
		if (value.charCodeAt(i) > 127) { 
		length++; 
		} 
		} 
		return this.optional(element) || (length >= param[0] && length <= param[1]); 
		}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
 


       
    </script>
    
    <br>
    内置验证方式：
 <br>
required()
 返回:Boolean
 必填验证元素
 <br>
required(dependency-expression)
 返回:Boolean
 必填元素依赖于表达式的结果
<br> 
required(dependency-callback)
 返回:Boolean
 必填元素依赖于回调函数的结果
 <br>
remote(url)
 返回:Boolean
 请求远程校验。url通常是一个远程调用方法
 <br>
minlength(length)
 返回:Boolean
 设置最小长度
 <br>
maxlength(length)
 返回:Boolean
 设置最大长度
 <br>
rangelength(range)
 返回:Boolean
 设置一个长度范围[min,max]
 <br>
min(value)
 返回:Boolean
 设置最大值
 <br>
max(value)
 返回:Boolean
 设置最小值
 <br>
email()
 返回:Boolean
 验证电子邮箱格式
 <br>
range(range)
 返回:Boolean
 设置值的范围
 <br>
url()
 返回:Boolean
 验证URL格式
 <br>
date()
 返回:Boolean
 验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)
 <br>
dateISO()
 返回:Boolean
 验证ISO类型的日期格式
 <br>
dateDE()
 返回:Boolean
 验证德式的日期格式（29.04.1994 or 1.1.2006）
 <br>
number()
 返回:Boolean
 验证十进制数字（包括小数的）
 <br>
digits()
 返回:Boolean
 验证整数
 <br>
creditcard()
 返回:Boolean
 验证信用卡号
 <br>
accept(extension)
 返回:Boolean
 验证相同后缀名的字符串
 <br>
equalTo(other)
 返回:Boolean
 验证两个输入框的内容是否相同
 <br>
phoneUS()
 返回:Boolean
 验证美式的电话号码
   <br> 
</body>
</html>